<template>
  <section id="city-list" class="city-list-container">
    <van-index-bar :index-list="indexList" :sticky="false">
      <section>
        <van-index-anchor index="定位">定位城市</van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="location-city">定位失败，请点击重试</div>
        </div>
      </section>

      <section>
        <van-index-anchor index="热门">热门城市</van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div
            class="city-item"
            v-for="hotCity in hotCities"
            :key="hotCity.id"
            @click="pickCity(hotCity)"
          >
            {{ hotCity.name }}
          </div>
        </div>
      </section>

      <section>
        <div v-for="(cities, value, index) in cityData" :key="index + 'value'">
          <van-index-anchor :index="value">{{ value }}</van-index-anchor>
          <div
            class="city-list city-list-block clearfix"
            v-for="ci in cities"
            :key="ci.id"
          >
            <div class="city-item" @click="pickCity(ci)">{{ ci.name }}</div>
          </div>
        </div>
      </section>
    </van-index-bar>
  </section>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      indexList: ["定位", "热门"],
      cityData: null,
      hotCities: null,
    };
  },
  async mounted() {
    let result = await this.$http.get({
      url: "/cities.json",
    });
    this.cityData = result.cities;
    console.log(this.cityData);
    this.hotCities = result.hotCities;
    this.indexList = [...this.indexList, ...Object.keys(result.cities)];
  },
  methods: {
    pickCity(city) {
      this.changeCity(city);
      this.$router.back();
    },
    ...mapActions(["changeCity"]),
  },
};
</script>

<style lang="stylus" scoped>
.city-list-container{
  background-color:#ebebeb;
  font-size:14px;
  color:#333;
  top:0;
  bottom:0;
  height:100%;
  width:100%;
  position:absolute;
  z-index:1000;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
  }
  .clearfix:after{
    content:" ";
    display:table;
    clear:both
  }
  .city-title{
    padding-left:15px;
    line-height:30px
  }
  .city-title-letter{
  padding-left:25px
  }
  .city-list{
    padding-right:30px
  }
  .city-list-inline{
    background-color:#f5f5f5;
    padding-bottom:8px
  }
  .city-list-inline .city-item,.city-list-inline .location-city{
    float:left;
    background:#fff;
    width:29%;
    height:33px;
    margin-top:15px;
    margin-left:4%;
    padding:0 4px;
    border:1px solid #e6e6e6;
    border-radius:3px;
    line-height:33px;
    text-align:center;
    box-sizing:border-box;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .city-list-inline .location-city{
    width:auto;
    min-width:30%;
    padding:0 20px
  }
  .city-list-block{
    background-color:#f5f5f5
  }
  .city-list-block .city-item{
    height:44px;
    line-height:44px;
    margin-left:15px;
    border-bottom:1px solid #c8c7cc
  }
  .city-list-block .city-item:last-child{
    border-bottom:none
  }
</style>
